// 方法一
// module.exports = {
//   css: {
//     loaderOptions: {
//       less: {
//         modifyVars: {
//           // 直接覆盖变量
//           // 1.全局修改vant组件的样式--直接使用对应的样式名字修改-会覆盖vant默认的样式
//           // 1.1.修改navbar的背景颜色和字体颜色；注意在配置项全局修改样式在其他页面使用该组件颜色
//           // 还是默认配置项修改
//           // 如果不想其他组件使用同一个颜色不需要被修改可以只在对应的页面style下直接修改
//           'nav-bar-background-color': '#057cff',
//           'nav-bar-title-text-color': '#fff'
//         }
//       }
//     }
//   }
// }
// 方法二
const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 方法二：可以通过less 文件覆盖(文件路径为绝对路径)
          // 因为vue.config.js文件是对webpack进行配置
          // 所以在webpack中获取文件的绝对路径需要使用__dirname
          // webpack运行在node环境中（后端环境）在node环境中引入的所有文件都必须
          // 以绝对路径的方式引入__dirname
          // 在webpack中拼接路径推荐使用path.resolve来实现路径的拼接
          hack: `true;@import "${path.resolve(__dirname, 'src/styles/cover.less')}"`
        }
      }
    }
  }
}
